<template>
    <div >
        <div class="top">
            <div class="left fl">
                <img src="../../assets/images/money.png" alt="">
            </div>
            <div class="right fl">
                <div>医疗总支出（共{{this.fyfl.jibi==null ?0:this.fyfl.jibi}}笔）<span>￥{{this.fyfl.heji==null ?0:this.fyfl.heji}}</span></div>
                <div>医保支付：<span>{{this.fyfl.ybzb==null ?0:this.fyfl.ybzb}}%</span> 自负支付：<span>{{this.fyfl.zfzb==null ?0:this.fyfl.zfzb}}%</span></div>
            </div>
        </div>
        <div class="center">
            <div class="title">
                <span></span>就诊类型费用占比
            </div>
            <div class="list">
                <div class="item">
                    <div class="fl left">
                        <img src="../../assets/images/hos.png" alt="">
                    </div>
                    <div class="fl right">
                        <p>住院 <span>{{this.fyfl.zyzb==null ?0:this.fyfl.zyzb}}%</span></p>
                        <p>￥{{this.fyfl.zy==null ?0:this.fyfl.zy}}</p>
                    </div>
                </div>
                <div class="item">
                    <div class="fl left">
                        <img src="../../assets/images/mz.png" alt="">
                    </div>
                    <div class="fr right">
                        <p>门急诊 <span>{{this.fyfl.mzzb==null ?0:this.fyfl.mzzb}}%</span></p>
                        <p>￥{{this.fyfl.mz==null ?0:this.fyfl.mz}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="title">
                <span></span>费用类别占比
            </div>
            <div class="charts"  >
                 <div class="charts-left " id="myChart" ></div>
                 <div class="charts-position">
                     <p  v-for="(item,i) in lbvalue" :key="i">
                         <span class="quare" :class="item.class"></span>{{item.name}}<span class="text">{{item.zhanbi}}%</span>
                     </p>
                     <!--<p><span class="quare zl"></span>诊疗<span class="text">12%</span></p>-->
                     <!--<p><span class="quare jc"></span>检查<span class="text">10%</span></p>-->
                     <!--<p><span class="quare jy"></span>检验<span class="text">15%</span></p>-->
                     <!--<p><span class="quare yp"></span>药品<span class="text">25%</span></p>-->
                     <!--<p><span class="quare ss"></span>手术<span class="text">20%</span></p>-->
                     <!--<p><span class="quare qt"></span>其他<span class="text">10%</span></p>-->

                 </div>
            </div>
        </div>
        <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
        <tips :hosName="hosName"></tips>
        <!-- 水印 -->
        <div class="watermark"></div>
    </div>
</template>

<script>
import tips from '@/components/tips.vue'
export default {
    name: 'HelloWorld',
    data () {
        return {
            fyfl:  JSON.parse(localStorage.getItem('fy')),
            msg: 'Welcome to Your Vue.js App',
            hosName:'',//医院名称
            fenlei:{},
            yanse: [],
            lbvalue:[]
        }
    },
    mounted(){
        this.drawLine();
    },
    methods:{
        fen() {
            var zoji = 0;
            var gh = [];
            var zhliao = [];
            var jiancha = [];
            var jianyan = [];
            var yaoping = [];
            var shoushu = [];
            var qita = [];
            this.fyfl.map.forEach(item => {
                let lb = item.mxfylb
                if (lb=="挂号") {
                    gh.push(item)
                } else if (lb=="诊疗") {
                    zhliao.push(item)
                }else if (lb=="检查") {
                    jiancha.push(item)
                }else if (lb=="检验") {
                    jianyan.push(item)
                }else if (lb=="药品") {
                    yaoping.push(item)
                }else if (lb=="手术") {
                    shoushu.push(item)
                }else if (lb=="其他") {
                    qita.push(item)
                }
                zoji += parseFloat(item.je);
            });
            if (zhliao.length > 0) {
                let value = {};
                let zhliaoheji = 0;
                zhliao.forEach(item1 => {
                    zhliaoheji += parseFloat(item1.je)
                })
                this.fenlei.zhliao  = zhliao ;
                value.value = Math.round(zhliaoheji * 100) / 100;
                value.zhanbi = Math.round(zhliaoheji/ zoji * 10000) /100;
                value.name = "诊疗";
                value.class = "zl"
                this.yanse.push("#79DF0A")
                this.lbvalue.push(value);
            }
            if (yaoping.length > 0) {
                let value = {};
                let yaopingheji = 0;
                yaoping.forEach(item1 => {
                    yaopingheji += parseFloat(item1.je)
                })
                this.fenlei.yaoping  = yaoping ;
                value.name = "药品";
                value.class = "yp"
                value.value = Math.round(yaopingheji * 100) / 100;
                value.zhanbi = Math.round(yaopingheji * 10000/ zoji)/100 ;
                this.yanse.push("#0097EE")
                this.lbvalue.push(value);
            }
            if (gh.length > 0) {
                let value = {};
                let ghheji = 0;
                gh.forEach(item1 => {
                    ghheji += parseFloat(item1.je)
                })
                this.fenlei.gh  = gh ;
                value.value = Math.round(ghheji * 100) / 100;
                value.zhanbi = Math.round(ghheji / zoji * 10000) /100;
                value.name = "挂号";
                value.class = "";
                this.yanse.push("#1CCEDA")
                this.lbvalue.push(value);
            }
            if (jianyan.length > 0) {
                let value = {};
                let jianyanheji = 0;
                jianyan.forEach(item1 => {
                    jianyanheji += parseFloat(item1.je)
                })
                this.fenlei.jianyan  = jianyan ;
                value.value = Math.round(jianyanheji * 100) / 100;
                value.zhanbi = Math.round(jianyanheji / zoji * 10000) /100;
                value.name = "检验";
                value.class = "jy"
                this.yanse.push("#1AE16F")
                this.lbvalue.push(value);
            }
            if (shoushu.length > 0) {
                let value = {};
                let shoushuheji = 0;
                shoushu.forEach(item1 => {
                    shoushuheji += parseFloat(item1.je)
                })
                this.fenlei.shoushu  = shoushu ;
                value.value = Math.round(shoushuheji * 100) / 100;
                value.zhanbi = Math.round(shoushuheji / zoji * 10000) /100;
                value.name = "手术";
                value.class = "ss";
                this.yanse.push("#F4A23F")
                this.lbvalue.push(value);
            }
            if (jiancha.length > 0) {
                let value = {};
                let jianchaheji = 0;
                jiancha.forEach(item1 => {
                    jianchaheji += parseFloat(item1.je)
                })
                this.fenlei.jiancha  = jiancha ;
                value.value = Math.round(jianchaheji * 100) / 100;
                value.zhanbi = Math.round(jianchaheji/zoji * 10000) /100;
                value.name = "检查";
                value.class = "jc";
                this.yanse.push("#FF7B7B")
                this.lbvalue.push(value);
            }
            if (qita.length > 0) {
                let value = {};
                let qitaheji = 0;
                qita.forEach(item1 => {
                    qitaheji += parseFloat(item1.je)
                })
                this.fenlei.qita  = qita ;
                value.value = Math.round(qitaheji * 100) / 100;
                value.zhanbi = Math.round(qitaheji / zoji * 10000) /100;
                value.name = "其他";
                value.class = "qt";
                this.yanse.push("#A987E3")
                this.lbvalue.push(value);
            }
        },

        drawLine(){
            let myChart = this.$echarts.init(document.getElementById('myChart'));
            //回执图表
            myChart.setOption({
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                    // show:false
                },

                // legend: {
                //     type: 'scroll',
                //     orient: 'vertical',
                //     right: 10,
                //     top: 25,
                //     bottom: 20,
                //     itemWidth:10,
                //     itemHeight:10,
                //     data: ['挂号','诊疗','检查','检验','药品','手术 ','其它'],
                //     textStyle:{
                //         fontSize: 16
                //     }
                // },
                toolbox: {
                    show : false,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'费用类别占比',
                        type:'pie',
                        radius : [60, 125],
                        center : ['35%', '50%'],
                        roseType : 'radius',
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        color: this.yanse,//['#1CCEDA','#79DF0A','#FF7B7B','#1AE16F','#0097EE','#F4A23F','#A987E3'],
                        data:this.lbvalue
                    }
                ]
            });
        }
    },
    components:{
        tips
    },
    created(){
        this.fen();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.fl{
    float:left;
}
.fr{
    float:right;
}
.top{
    background:#fff;
    overflow: hidden;
    padding: 1.3rem 1rem;
    .left{
        width: 3rem;
        margin-right:1rem;
        img{
            width:100%;
        }
    }
    .right{
        font-size: 1rem;
        color:#666;
        line-height: 1.5rem;
        div:first-child{
            span{
                color: #323333;
                font-size: 1.3rem;
            }
        }
        div:nth-child(2){
            span{
                color:#1DAEEC;
                margin-right: 1rem;
            }
        }
    }
}
.center{
    background: #fff;
    margin-top:0.6rem;
    .title{
        padding: 1rem;
        border-bottom:#DDDDDD solid 1px;
        font-size: 1rem;
        color: #009CDF;
        line-height: 1rem;
        span{
            display: inline-block;
            vertical-align: middle;
            margin-right:0.33rem;
            width: 0.33rem;
            height:1rem;
            background:linear-gradient(0deg,rgba(47,152,240,1),rgba(99,217,245,1));
        }
    }
    .list{
        display: flex;
        padding:0 2rem;

        .item{
            padding:1.6rem  0;
            flex: 1;
            .left{
                width:2rem;
                margin-right:1rem;
                img{
                    width: 100%;
                }
            }
            .right{
                color:#666666;
                font-size: 1rem;
                line-height: 1.2rem;
                p:first-child{
                    margin-bottom:0.3rem;
                    span{
                        color:#1DAEEC;
                    }
                }
                p:nth-child(2){
                    color:#333333;
                    span{
                        color:#F4A23F;
                    }
                }
            }
        }
        .item:first-child{
            border-right: #DDDDDD solid 1px;
            padding-right:1.6rem;
        }
        .item:nth-child(2){
            padding-left:1.6rem;
            .left{
                margin-right:0rem;
            }
        }
    }
}
.bottom{
    background: #fff;
    margin-top:0.6rem;
    .title{
        padding: 1rem;
        border-bottom:#DDDDDD solid 1px;
        font-size: 1rem;
        color: #009CDF;
        line-height: 1rem;
        span{
            display: inline-block;
            vertical-align: middle;
            margin-right:0.33rem;
            width: 0.33rem;
            height:1rem;
            background:linear-gradient(0deg,rgba(47,152,240,1),rgba(99,217,245,1));
        }
    }
    .charts{
        height: 17rem;
        border-bottom: #ddd solid 1px;
        position: relative;
        .charts-left{
                height: 17rem;
                position: relative;
        }
        .charts-position{
            position: absolute;
            top:2rem;
            right:1rem;
            z-index: 99999;
            font-size: 1rem;
            color:#323333;
            .quare{
                display: inline-block;
                width: 0.6rem;
                height:0.6rem;
                border-radius:0.2rem;
                background: #1CCEDA;
                margin-right:0.5rem;
                vertical-align: middle;
            }
            .zl{
                background: #79DF0A;
            }
            .jc{
                background: #FF7B7B;
            }
            .jy{
                background: #1AE16F;
            }
            .yp{
                background: #0097EE;
            }
            .ss{
                background: #F4A23F
            }
            .qt{
                background: #A987E3;
            }
            .text{
                margin-left: 0.5rem;
                color:#323333;
            }
        }
    }
}
</style>
